<template>
    <div class="table-box">
        <div class="table-search">
            <el-form :inline="true" :model="form">
                <el-form-item label="用户UID">
                    <el-input v-model="form.uid" placeholder="用户UID" />
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker v-model="form.timeData" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="截止日期" :default-time="pickerDefaultTime" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onQuery">查询</el-button>
                    <el-button @click="onReset">重置</el-button>
                    <el-button type="primary" plain @click="onAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="card content-box">
            <div class="table">
                <el-table :data="tableData" border v-loading="loading">
                    <el-table-column prop="id" label="ID" align="center" width="70" />
                    <el-table-column prop="uid" label="用户UID" align="center" width="120" />
                    <el-table-column prop="content" label="内容" align="center" width="400" />
                    <el-table-column label="图片" align="center" width="500">
                    <template #default="scope">
                        <el-image v-for="item in scope.row.pictures_list"
                        style="width: 70px; height: 70px; padding: 0 2px;"
                        :src="item" fit="fill"
                        :preview-src-list="[item]"
                        :preview-teleported="true"
                        ></el-image>
                    </template>
                    </el-table-column>
                    <el-table-column prop="comments" label="评论数" align="center" width="70" />
                    <el-table-column prop="likes" label="点赞数" align="center" width="70" />
                    <el-table-column prop="is_public" label="审核" align="center">
                        <template #default="scope">
                        <el-tag :type="scope.row.is_public === 1 ? 'success' : 'warning'">{{ scope.row.is_public === 1 ? "已审核" : "未审核" }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createtime" label="发布时间" align="center" :formatter="formatterTime" width="180" />
                    <el-table-column prop="ip" label="IP" align="center" width="150" />
                    <el-table-column label="操作" align="center" width="150" fixed="right">
                        <template #default="scope">
                            <el-button type="warning" @click="handleOperate(scope.$index, scope.row.id, 'audit')" v-if="scope.row.is_public != 1">审核</el-button>
                            <el-button type="danger" @click="handleOperate(scope.$index, scope.row.id, 'delete')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-pagination">
                    <el-pagination :current-page="pageable.pageNum" :page-size="pageable.pageSize"
                        :page-sizes="[10, 25, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                        :total="pageable.total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
        <PublishForm
          @cancel="cancel"
          @closeDialog="closeDialog"
          @submitForm="submit"
          @handleUploaderImgRequest="handleUploader"
          :dialogFormVisible="dialogFormVisible"
          :dialogForm="dialogForm"
          :btnLoading="btnLoading"
        />
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { formatterTime, pickerDefaultTime, timestamp } from "@/utils/utils";
import { momentsListApi, momentsPublishApi, momentsDeleteApi, momentsAuditApi } from "@/api/moby/moments/moments";
import PublishForm from "./publishMomentForm.vue";

const tableData = ref([]);
const loading = ref(false);
const btnLoading = ref(false);
const btnType = ref(null);
const dialogFormVisible = ref(false);
const dialogFormData = {
    uid: "",
    content: "",
    image1: "",
    image1_show: "",
    image2: "",
    image2_show: "",
    image3: "",
    image3_show: "",
    image4: "",
    image4_show: "",
    image5: "",
    image5_show: "",
    image6: "",
    image6_show: "",
    image7: "",
    image7_show: "",
    image8: "",
    image8_show: "",
    image9: "",
    image9_show: "",
};
const dialogForm = reactive({ ...dialogFormData });

const formData = {
    uid: "",
    timeData: []
};
const form = reactive({ ...formData });

const pageable = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
});

// 参数
const param = () => {
    return {
        page: pageable.pageNum,
        pagesize: pageable.pageSize,
        uid: form.uid,
        start: form.timeData[0] ? timestamp(form.timeData[0].valueOf()) : "",
        end: form.timeData[1] ? timestamp(form.timeData[1].valueOf()) : "",
    };
};

// 获取表格数据
const getTbaleData = async () => {
    loading.value = true;

    try {
        const res = await momentsListApi(param());
        loading.value = false;
        tableData.value = res.data.results;
        pageable.total = res.data.count;
    } catch (error) {
        loading.value = false;
    }
};
//新增
const onAdd = () => {
    dialogFormVisible.value = true;
    btnType.value = "add";
};
//关闭弹窗
const closeDialog = () => {
    dialogFormVisible.value = false;
    btnType.value = null
    Object.assign(dialogForm, dialogFormData);
};
// 取消
const cancel = () => {
    dialogFormVisible.value = false;
    btnType.value = null
    Object.assign(dialogForm, dialogFormData);
};
const handleUploader = (res, name, src) => {
    if (res.code === 0) {
        ElMessage({
            message: "图片上传成功",
            type: "success"
        });
        dialogForm[src] = res.data.pic_url || "";
        dialogForm[name] = res.data.name || "";
    }
};
// 提交
const submit = async param => {
    try {
        btnLoading.value = true;
        if(btnType == 'add') {
            delete param.id
        }
        const res = await momentsPublishApi(param);
        ElMessage({
            message: res.message,
            type: "success"
        });
        dialogFormVisible.value = false;
        btnLoading.value = false;
        getTbaleData();
    } catch (error) {
        btnLoading.value = false;
        dialogFormVisible.value = false;
    }
};
const handleOperate = async (index, rid, type) => {
    // 删除
    if (type === "delete") {
        ElMessageBox.confirm("您是否确认删除该动态?", "温馨提示", {
            type: "warning",
        }).then(async () => {
            const res = await momentsDeleteApi({ moment_id: rid });
            ElMessage.success(res.message);
            getTbaleData();
        });
    }
    if (type === "audit") {
        ElMessageBox.confirm("您是否确认审核该动态?", "温馨提示", {
            type: "warning",
        }).then(async () => {
            const res = await momentsAuditApi({ moment_id: rid });
            ElMessage.success(res.message);
            getTbaleData();
        });
    }
};
// 重置
const onReset = () => {
    Object.assign(form, formData);getTbaleData();
};
// 查询
const onQuery = async () => {
    getTbaleData();
};

// 条数
const handleSizeChange = (number) => {
    pageable.pageSize = number;
    getTbaleData();
};
// 页码
const handleCurrentChange = (number) => {
    pageable.pageNum = number;
    getTbaleData();
};
onMounted(() => {
    getTbaleData();
});
</script>
  